<template>
  <div class="title">
    <div style="height: 15%">
      <img alt="" src="../../../../public/images/top_bg.png" style="width: 100%;position: relative;">
      <div class="title_top">安心北宅 - 智慧应急平台</div>
      <div class="title_top_data">2023.10.01 12:59</div>
      <div class="title_top_mon">星期三</div>
      <div class="title_top_date">平台运行406天</div>
      <div class="title_top_tq">晴转多云</div>
    </div>
    <div style="display: flex;color: white;width: 100%;height: 85%">
      <!--      左侧三个 基础数据 企业分类 隐患排查-->
      <div style="width: 23%;margin-left: 2%">
        <!--        基础数据-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'25%'}" class="basic_data">
          <div class="top_left_title">基础数据</div>
          <div style="display: flex;padding-top: 8%">
            <div style="width: 30%;margin-left:4%;text-align: center">
              <div class="tot_left_data">45545</div>
              <img alt="" class="top_left_img" src="../../../../public/images/gongju.png">
              <div class="tot_left_name">企业数</div>
            </div>
            <div style="width: 30%;text-align: center">
              <div class="tot_left_data">21345</div>
              <img alt="" class="top_left_img" src="../../../../public/images/jiuxiao.png">
              <div class="tot_left_name">九小场所数</div>
            </div>
            <div style="width: 30%;text-align: center">
              <div class="tot_left_data">203.23万</div>
              <img alt="" class="top_left_img" src="../../../../public/images/zhuhu.png">
              <div class="tot_left_name">住户数</div>
            </div>
          </div>
        </div>
        <!--        企业分类-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'35%',marginTop:'3%'}" class="basic_data">
          <div class="center_left_title">企业分类</div>
          <div id="EnterpriseClassification" style="width:100%;height:100%;margin-top: -3%"></div>
        </div>
        <!--        隐患排查-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'33%',marginTop:'3%'}" class="basic_data">
          <div class="center_left_title">隐患排查</div>
          <div style="display: flex;height: 90%;margin-top: 5%">
            <div style="width: 30%;text-align: center;margin-left: 4%">
              <div class="bottom_left_num">750</div>
              <div class="bottom_left_text">整改数</div>
              <div style="font-size: 70px;margin-top: -40%;color: #65FFFE">.</div>
            </div>
            <div :style="{backgroundImage:'url('+bg2+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}" style="width: 26%;text-align: center;height: 45%;margin: 5% 0 0 3%">
              <div style="margin-top: 32%;font-size: 14px">90%</div>
              <div style="color: #7CC1FF;font-size: 17px">整改率</div>
            </div>
            <div style="width: 30%;text-align: center">
              <div class="bottom_left_num">250</div>
              <div class="bottom_left_text">未整改数</div>
              <div style="font-size: 70px;margin-top: -40%;color: #0E5FFF">.</div>
            </div>
          </div>
          <div style="display: flex;margin-top: -24%;text-align: left;justify-content: space-around">
            <div class="bottom_left_border">
              <div class="bottom_left_border_text">监管单位数</div>
              <div class="bottom_left_border_num">1234</div>
            </div>
            <div class="bottom_left_border">
              <div class="bottom_left_border_text">检查单位数</div>
              <div class="bottom_left_border_num">567</div>
            </div>
            <div class="bottom_left_border">
              <div class="bottom_left_border_text">查出隐患数</div>
              <div class="bottom_left_border_num">35</div>
            </div>
          </div>
        </div>
      </div>
      <!--中间2个 地图  各社区基础数据-->
      <div style="width: 46%;margin-left: 2%">
        <!--地图-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'53%'}" class="basic_data">
          <div style="height: 100%" id="container"></div>
        </div>
        <!--        各社区基础数据-->
        <div :style="{backgroundImage:'url('+bg1+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'43%',marginTop:'2%'}" class="basic_data">
          <div class="bottom_center_title">各社区基础数据</div>
          <div id="main" style="width:100%;height:75%;padding-top: 6%"></div>
        </div>
      </div>
      <!--右侧3个 需求数据 居家安全 应急物资-->
      <div style="width: 23%;margin-left: 2%">
        <!--        需求数据-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'25%'}" class="basic_data">
          <div class="top_left_title">需求数据</div>
          <div style="display: flex;padding-top: 8%">
            <div style="width: 30%;margin-left:4%;text-align: center">
              <div class="tot_left_data">65545</div>
              <img alt="" class="top_left_img" src="../../../../public/images/demand_re.png">
              <div class="tot_left_name">需求上报数</div>
            </div>
            <div style="width: 30%;text-align: center">
              <div class="tot_left_data">5545</div>
              <img alt="" class="top_left_img" src="../../../../public/images/demand_reply.png">
              <div class="tot_left_name">需求回复数</div>
            </div>
            <div style="width: 30%;text-align: center">
              <div class="tot_left_data">2245</div>
              <img alt="" class="top_left_img" src="../../../../public/images/demand_noreply.png">
              <div class="tot_left_name">需求未回复数</div>
            </div>
          </div>
        </div>
        <!--        居家安全-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'35%',marginTop:'3%'}" class="basic_data">
          <div class="center_left_title">居家安全</div>
          <div id="homesafe" style="width:100%;height:75%;"></div>
        </div>
        <!--        应急物资-->
        <div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'33%',marginTop:'3%'}" class="basic_data">
          <div class="center_left_title">应急物资</div>
          <div style="width: 100%;height: 100%;display: flex">
            <div style="width: 50%;height: 100%">
              <div :style="{backgroundImage:'url('+bg3+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}" style="width: 54%;text-align: center;height: 45%;margin: 25% 0 0 20%">
                <div class="bottom_right_text">5678
                </div>
                <div style="font-size: 12px;">库存数
                </div>
              </div>
              <div class="bottom_right_num">
                <div class="bottom_right_num_text">入库数：</div>
                <div>2265</div>
                <div class="bottom_right_num_text">出库数：</div>
                <div>1045</div>
              </div>
            </div>
            <div style="width:50%;height: 90%">
              <div :style="{backgroundImage:'url('+bg4+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}"
                   style="height: 15%;width: 90%;display: flex;justify-content: space-around;margin-top: 20%">
                <div class="bottom_right_img_text">基本生活<br>保障物资</div>
                <div class="bottom_right_img_num">2008</div>
              </div>
              <div :style="{backgroundImage:'url('+bg4+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}"
                   style="height: 15%;width: 90%;display: flex;justify-content: space-around;margin-top: 10%">
                <div class="bottom_right_img_text">应急装备及<br>配套物资</div>
                <div class="bottom_right_img_num">5365</div>
              </div>
              <div :style="{backgroundImage:'url('+bg4+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}"
                   style="height: 15%;width: 90%;display: flex;justify-content: space-around;margin-top: 10%">
                <div class="bottom_right_img_text">工程材料与机<br>械加工设备</div>
                <div class="bottom_right_img_num">1200</div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>
<script>
import * as echarts from 'echarts';
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: 'b1af1262f4b311a9b9427df8e95238ac'  //填写你的安全密钥
}
export default {
  data() {
    return {
      bg: require('../../../../public/images/moban_bg_290.png'),
      bg1: require('../../../../public/images/moban_bg_380.png'),
      bg2: require('../../../../public/images/zhenggailv.png'),
      bg3: require('../../../../public/images/quantity.png'),
      bg4: require('../../../../public/images/quantity_rigt.png'),
      map:null
    }
  },
  mounted() {
    this.add()
    this.EnterpriseClassification()
    this.homesafe()
    this.initMap()
  },
  methods: {

    initMap() {
      let load = AMapLoader.load({
        key: "b1af1262f4b311a9b9427df8e95238ac",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {  //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          zoom: 10,           //初始化地图级别
          center: [120.2, 36.04], //初始化地图中心点位置
        });
      }).catch(e => {
        console.log(e);
      })
      console.log(load)
    },
    //居家安全echart图
    homesafe() {
      var myChart = echarts.init(document.getElementById('homesafe'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: 'left',
          top: 20,
          left: 60,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          textStyle: {
            color: '#fff',
            fontSize: 12,

          }
        },
        grid: {
          left: '3%',
          right: '3%',
          // top:'0%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value'

        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'grey',
            interval: 0,
            // formatter: function (value) {
            //   return value.split('').join('\n')
            // }
          },
          //y轴名称 按接口返回数据来
          data: ['普通居民', '孤寡老人', '独居老人']
        },
        series: [
          {
            name: '煤取暖户数',
            type: 'line',

            // stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#D0C55A'},
                    {offset: 1, color: '#D0C55A'}
                  ]
              )
            },
            //x轴数值
            data: [220, 302, 101,]
          },
          {
            name: '空气取暖户数',
            type: 'line',

            // stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#2CC2B7'},
                    {offset: 1, color: '#2CC2B7'}
                  ]
              )
            },
            //x轴数值
            data: [120, 202, 201,]
          },
          {
            name: '报警器缺失数',
            type: 'line',

            // stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#FFA06C'},
                    {offset: 1, color: '#FFA06C'}
                  ]
              )
            },
            //x轴数值
            data: [420, 102, 201,]
          },
          {
            barGap: 20,
            barWidth: 10,
            name: '',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                      {offset: 0, color: '#1A6BD0'},
                      {offset: 1, color: '#04DCFB'}
                    ]
                ),
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [10, 10, 0, 0]
              },

            },
            data: [220, 182, 191]
          },
        ]
      }
      myChart.setOption(option)
    },
    // 企业分类柱状图
    EnterpriseClassification() {
      var myChart = echarts.init(document.getElementById('EnterpriseClassification'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {},
        legend: {
          x: 'left',
          left: 19,
          top: 0,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 250,
          textStyle: {
            color: '#fff',
            fontSize: 10,

          }
        },
        xAxis: [
          {
            axisLabel: {
              color: 'grey',
              interval: 0,
              fontSize: 10
              // formatter: function (value) {
              //   return value.split('').join('\n')
              // }
            },//x轴字体样式
            type: 'category',
            data: ['周一儿', '周一儿', '周一儿', '周一儿', '周一儿', '周一儿', '周一儿'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              // formatter: '{value}'
              formatter: ''//y轴数值为空
            }
          },
        ],
        series: [
          {
            name: '本区注册数',
            type: 'bar',
            barGap: 0.1,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                      {offset: 0, color: '#00308F'},
                      {offset: 1, color: '#09C9C5'}
                    ]
                ),
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 10
                  }
                }
              },

            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              20, 49, 70, 232, 256, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '外区注册数',
            type: 'bar',
            barGap: 0.1,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                      {offset: 0, color: '#2E4112'},
                      {offset: 1, color: '#FDEA6E'}
                    ]
                ),
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 10
                  }
                },
              },

            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              26, 59, 90, 264, 287, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
        ]
      };
      myChart.setOption(option)
    },
    add() {
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: 'left',
          left: 60,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          textStyle: {
            color: '#fff',
            fontSize: 12,

          }
        },
        grid: {
          left: '3%',
          right: '3%',
          // top:'0%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value'

        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff',
            interval: 0,
            formatter: function (value) {
              return value.split('').join('\n')
            }
          },
          //y轴名称 按接口返回数据来
          data: ['周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一', '周一']
        },
        series: [
          {
            name: '企业数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#1B63CC'},
                    {offset: 1, color: '#03DFFC'}
                  ]
              )
            },
            barGap: 20,
            //x轴数值
            data: [320, 302, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230, 210]
          },
          {
            barGap: 20,
            name: '九小场所数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#05A998'},
                    {offset: 1, color: '#63FBFC'}
                  ]
              )
            },
            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230, 210]
          },
          {
            barGap: 20,
            name: '住户数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#2D5CBD'},
                    {offset: 1, color: '#40A0FA'}
                  ]
              )
            },
            data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '现存隐患数',
            type: 'line',

            // stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: 'yellow'},
                    {offset: 1, color: 'yellow'}
                  ]
              )
            },
            //x轴数值
            data: [320, 302, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230, 210]
          },
        ]
      }
      myChart.setOption(option)

    },

  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.title {
  background: #02004D;
  height: 100%;
  width: 100%;
  position: absolute;
}

.title_top {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 2%;
  left: 38.5%;
  font-weight: 900;
}

.title_top_data {
  color: #32C5FF;
  position: absolute;
  top: 6.5%;
  left: 10%;
  font-size: 14px
}

.title_top_mon {
  color: #32C5FF;
  position: absolute;
  top: 9.5%;
  left: 19%;
  font-size: 12px
}

.title_top_date {
  color: #32C5FF;
  position: absolute;
  top: 6.5%;
  left: 84%;
  font-size: 14px
}

.title_top_tq {
  color: #32C5FF;
  position: absolute;
  top: 9.5%;
  left: 79%;
  font-size: 12px
}

.basic_data {
  width: 100%;
  height: 100%;
}

.bottom_center_title {
  padding: 1% 0 0 42%;
  font-size: 18px;
  color: #32C5FF;
}

.top_left_title {
  padding: 0.5% 0 0 44%;
  font-size: 14px;
  color: #32C5FF;
}

.tot_left_data {
  color: #66FFFF;
  font-size: 18px;
  font-weight: 900;
}

.tot_left_name {
  font-size: 14px;
  color: #ffffff;
}

.top_left_img {
  padding: 3% 0 3% 0;
}

.center_left_title {
  padding: 1% 0 0 44%;
  font-size: 14px;
  color: #32C5FF;
}

.bottom_left_num {
  color: #66FFFF;;
  font-size: 30px;
  margin-top: 30%
}

.bottom_left_text {
  margin-top: 4%;
  font-size: 15px;
}

.bottom_left_border {
  border: 1px solid #0A1266FF;
  /*background: #0D155DFF;*/
  /*border-radius: 9px;*/
  background: linear-gradient(#1359df, #1359df) top left,
  linear-gradient(#1359df, #1359df) top left,
  linear-gradient(#1359df, #1359df) top right,
  linear-gradient(#1359df, #1359df) top right,
  linear-gradient(#1359df, #1359df) right bottom,
  linear-gradient(#1359df, #1359df) right bottom,
  linear-gradient(#1359df, #1359df) left bottom,
  linear-gradient(#1359df, #1359df) left bottom;
  background-size: 4px 1px, 1px 4px;
  background-repeat: no-repeat;

}

.bottom_left_border_text {
  padding: 10px 15px 0 15px;
  font-size: 14px
}

.bottom_left_border_num {
  padding-bottom: 5px;
  padding-left: 15px;
  font-size: 21px;
  color: #0388C8FF
}

.bottom_right_text {
  padding-top: 25%;
  font-size: 31px;
  background: linear-gradient(to bottom, #66FFFF 50%, #F7B500 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bottom_right_num {
  display: flex;
  font-size: 12px;
  margin-top: 4%
}

.bottom_right_num_text {
  color: #3EAAFF;
  margin-left: 8%
}

.bottom_right_img_text {
  min-width: 30%;
  font-size: 11px;
  padding-top: 2%;
  margin-left: -4%;
}

.bottom_right_img_num {
  color: #66FFFF;
  margin-left: 4%;
  font-size: 20px;
  padding-top: 2%
}
</style>
